{% extends "base.html" %}
{% load i18n %}
{% load navigation_tags %}
{% load authorization_tags %}
{% block content %}
    {{ block.super }}
    {% load display_tags %}
    {% trans "First Name" as first_name %}
    {% trans "Last Name" as last_name %}
    {% trans "User Name" as user_name %}
    {% trans "Email" as email %}
    {% trans "Active" as active %}
    {% trans "Superuser" as superuser %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading tight">
                    <h3 class="has-filters">
                        {{ name }}
                        <div class="dropdown pull-right">
                            <button id="show-filters" aria-label="Filters" data-toggle="collapse" data-target="#the-filters" class="btn btn-primary toggle-filters"> <i class="fa-solid fa-filter"></i> <i class="caret"></i> </button>
                            {% if "auth.add_user"|has_configuration_permission:request %}
                            <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1"
                                    data-toggle="dropdown" aria-expanded="true">
                                <span class="fa-solid fa-screwdriver-wrench"></span>
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu"
                                aria-labelledby="dropdownMenu1">
                                    <li role="presentation">
                                        <a href="{% url 'add_user' %}">
                                            <i class="fa-solid fa-plus"></i> {% trans "New User" %}
                                        </a>
                                    </li>
                            </ul>
                            {% endif %}
                        </div>
                    </h3>
                </div>
                <div id="the-filters" class="is-filters panel-body collapse {% if filtered.form.has_changed %}in{% endif %}">
                    {% include "dojo/filter_snippet.html" with form=filtered.form %}
                </div>
            </div>
            {% if users %}
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=users page_size=True %}
                </div>
                <div class="panel panel-default table-responsive">
                    {% block users_table %}
                        <table id="users"
                            class="tablesorter-bootstrap table table-condensed table-striped">
                            {% block users_table_header_row %}
                                <tr>
                                    <th></th>
                                    {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                                    <th class="nowrap">{% dojo_sort request first_name 'first_name' %}</th>
                                    {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                                    <th class="nowrap">{% dojo_sort request last_name 'last_name' %}</th>
                                    {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                                    <th class="nowrap">{% dojo_sort request user_name 'username' 'asc' %}</th>
                                    {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                                    <th class="nowrap">{% dojo_sort request email 'email' %}</th>
                                    <th class="nowrap">{% trans "Title" %}</th>
                                    <th class="nowrap">{% trans "Phone Number(s)" %}</th>
                                    {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                                    <th class="nowrap, text-center">{% dojo_sort request active 'is_active' %}</th>
                                    {% comment %} The display field is translated in the function. No need to translate here as well{% endcomment %}
                                    <th class="nowrap, text-center">{% dojo_sort request superuser 'is_superuser' %}</th>
                                    <th class="nowrap">{% trans "Global Role" %}</th>
                                    <th class="nowrap">{% trans "Date Joined" %}</th>
                                    <th class="nowrap">{% trans "Last Login" %}</th>
                                    {% block users_table_extra_header_rows %}
                                    {% endblock users_table_extra_header_rows %}
                                </tr>
                            {% endblock users_table_header_row %}
                            {% block users_table_data_rows %}
                                {% for u in users %}
                                    <tr>
                                        <td>
                                            <ul>
                                                <li class="dropdown" style="list-style:none;position:absolute">
                                                    <a href="#" aria-haspopup="true" aria-label="User options menu" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" id="dropdownMenuUser">&nbsp;<b class="fa-solid fa-ellipsis-vertical"></b>&nbsp;</a>
                                                    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuUser">
                                                        <li role="presentation">
                                                            <a class="" href="{% url 'view_user' u.id %}" id="viewUser" role="menuitem">
                                                            <i class="fa-solid fa-rectangle-list"></i> {% trans "View" %}</a>
                                                        </li>
                                                        {% if "auth.change_user"|has_configuration_permission:request %}
                                                        <li role="presentation">
                                                            <a class="" href="{% url 'edit_user' u.id %}" id="editUser" role="menuitem">
                                                            <i class="fa-solid fa-pen-to-square"></i> {% trans "Edit" %}</a>
                                                        </li>
                                                        {% endif %}
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                        <a href="{% url 'action_history' u|content_type u.id %}" role="menuitem">
                                                            <i class="fa-solid fa-clock-rotate-left"></i> {% trans "View History" %}
                                                        </a>
                                                        </li>
                                                        {% if "auth.delete_user"|has_configuration_permission:request and u.id != request.user.id %}
                                                        <li role="separator" class="divider"></li>
                                                        <li role="presentation">
                                                            <a class="" href="{% url 'delete_user' u.id %}" role="menuitem">
                                                            <i class="fa-solid fa-trash"></i> {% trans "Delete" %}</a>
                                                        </li>
                                                        {% endif %}
                                                    </ul>
                                                </li>
                                            </ul>
                                        </td>
                                        <td><a href="{% url 'view_user' u.id %}">{{ u.first_name }}</a></td>
                                        <td><a href="{% url 'view_user' u.id %}">{{ u.last_name }}</a></td>
                                        <td><a href="{% url 'view_user' u.id %}">{{ u.username }}</a></td>
                                        <td>{{ u.email }}</td>
                                        <td>{% if u.usercontactinfo.title %} {{ u.usercontactinfo.title }} {% endif %}</td>
                                        <td>
                                            {% if u.usercontactinfo.phone_number %} {% trans "Phone:" %} {{ u.usercontactinfo.phone_number }} {% endif %}
                                            {% if u.usercontactinfo.phone_number and u.usercontactinfo.cell_number %}<br/> {% endif %}
                                            {% if u.usercontactinfo.cell_number %} {% trans "Cell:" %} {{ u.usercontactinfo.cell_number }}  {% endif %}
                                        </td>
                                        <td class="text-center">{% if u.is_active %}
                                            <i class="text-success fa-solid fa-check"></i>{% else %}
                                            <i class="text-danger fa-solid fa-xmark"></i>{% endif %}</td>
                                        <td class="text-center">{% if u.is_superuser %}
                                            <i class="text-success fa-solid fa-check"></i>{% else %}
                                            <i class="text-danger fa-solid fa-xmark"></i>{% endif %}</td>
                                        <td>{% if u.global_role.role %} {{ u.global_role.role }} {% endif %}</td>
                                        <td>{{ u.date_joined }}</td>
                                        <td>{% if u.last_login %}{{ u.last_login }}{% else %}{% trans "Never" %}{% endif %}</td>
                                        {% block users_table_extra_data_rows %}
                                        {% endblock users_table_extra_data_rows %}
                                    </tr>
                                {% endfor %}
                            {% endblock users_table_data_rows %}
                        </table>
                    {% endblock users_table %}
                </div>
                <div class="clearfix">
                    {% include "dojo/paging_snippet.html" with page=users page_size=True %}
                </div>
            {% else %}
                <h5>{% trans "No Users" %}</h5>
            {% endif %}
        </div>
    </div>

{% endblock %}
{% block postscript %}
    {{ block.super }}
    {% include "dojo/filter_js_snippet.html" %}
{% endblock %}